<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>过渡动效</title>
    <script src="../vue.js"></script>
    <script src="../vue-router.js"></script>
    <style>
        .fade-enter-active,
        .fade-leave-active {
            transition: opacity .5s ease;
        }

        .fade-enter,
        .fade-leave-active {
            opacity: 0
        }

        .child-view {
            position: absolute;
            transition: all .5s cubic-bezier(.55, 0, .1, 1);
        }

        .slide-left-enter,
        .slide-right-leave-active {
            opacity: 0;
            -webkit-transform: translate(30px, 0);
            transform: translate(30px, 0);
        }

        .slide-left-leave-active,
        .slide-right-enter {
            opacity: 0;
            -webkit-transform: translate(-30px, 0);
            transform: translate(-30px, 0);
        }
    </style>
</head>

<body>
    <div id="app">
        <h1>Transitions</h1>
        <ul>
            <li>
                <router-link to="/">/</router-link>
            </li>
            <li>
                <router-link to="/parent">/parent</router-link>
            </li>
            <li>
                <router-link to="/parent/foo">/parent/foo</router-link>
            </li>
            <li>
                <router-link to="/parent/bar">/parent/bar</router-link>
            </li>
        </ul>
        <transition name="fade" mode="out-in">
            <router-view class="view"></router-view>
        </transition>
    </div>
    <script>
        const Home = {
            template: `
                    <div class="home">
                        <h2> Home </h2>
                        <p> hello </p>
                    </div>
                        `
        }
        const Parent = {
            data() {
                return {
                    transitionName: 'slide-left'
                }
            },
            // dynamically set transition based on route change
            watch: {
                '$route' (to, from) {
                    const toDepth = to.path.split('/').length
                    const fromDepth = from.path.split('/').length
                    this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
                }
            },
            template: `
        <div class="parent">
            <h2> Parent </h2>
        <transition :name = "transitionName" >
            <router-view class= "child-view"> </router-view>
        </transition>
        </div>
    `
        }

        const Default = {
            template: '<div class="default">default</div>'
        }
        const Foo = {
            template: '<div class="foo">foo</div>'
        }
        const Bar = {
            template: '<div class="bar">bar</div>'
        }

        const router = new VueRouter({

            routes: [{
                    path: '/',
                    component: Home
                },
                {
                    path: '/parent',
                    component: Parent,
                    children: [{
                            path: '',
                            component: Default
                        },
                        {
                            path: 'foo',
                            component: Foo
                        },
                        {
                            path: 'bar',
                            component: Bar
                        }
                    ]
                }
            ]
        })

        new Vue({
            router
        }).$mount('#app')
    </script>
</body>

</html>